<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
  	<head>
    	<title>角色管理</title>
    	<jsp:include page="/commons/head.jsp"></jsp:include>
	</head>
  
  	<body>
    	
    	<span class="layui-breadcrumb">
		  	<a href="/" target="_top">CRM</a>
		  	<a href="javascript:">管理系统</a>
		  	<a><cite>角色管理</cite></a>
		</span>
		
		<blockquote class="layui-elem-quote quote-new">
			<form class="layui-form" action="">
    			<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">角色</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="roleName" placeholder="请输入角色名称" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">状态</label>
				    <div class="layui-input-inline">
				      	<select name="status">
					        <option value=""></option>
					        <option value="1">正常</option>
					        <option value="0">禁用</option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
					<button class="layui-btn" lay-submit lay-filter="searchForm">查询</button>
				</div>
    		</form>
		</blockquote>
    	
    	<div>
			<button class="layui-btn layui-btn-normal openEdit">添加</button>
		</div>
		
		<form class="layui-form" action="">
			<table class="layui-table" id="tableList">
			  	<colgroup>
			    	<col width="30">
			    	<col width="160">
			    	<col width="100">
			    	<col width="200">
			    	<col>
			  	</colgroup>
		  		<thead>
		    		<tr>
		    			<th><input type="checkbox" name="all" lay-skin="primary" lay-filter="chkRoleIdAll"/></th>
				      	<th>角色名称</th>
				      	<th>状态</th>
				      	<th>创建时间</th>
				      	<th>操作</th>
		    		</tr> 
		  		</thead>
		  		<tbody></tbody>
			</table>
		</form>
    	
    	<div id="div-page"></div>
    	
    	<div id="div-edit" style="display:none;margin:15px 0;">
    		<form class="layui-form" id="formEdit" action="">
	    		<input type="hidden" name="roleId">
	    		<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">角色</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="roleName" lay-verify="required" placeholder="角色名称" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">状态</label>
				    <div class="layui-input-inline">
				      	<select name="status">
					        <option value=""></option>
					        <option value="1">正常</option>
					        <option value="0">禁用</option>
				      	</select>
				    </div>
				</div>
				<div style="text-align:right;padding-right:26px;">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveForm">保存</button>
					<button class="layui-btn layui-btn-primary" id="btn-edit-cancel">取消</button>
				</div>
			</form>
    	</div>
    	
    	<div id="div-menu" style="display:none;margin:15px 0;">
    		<form class="layui-form" id="formMenu" action="">
	    		<input type="hidden" name="roleId">
				<table class="layui-table" lay-skin="row" id="tableMenuList" style="border-top:0px;">
			  		<tbody></tbody>
				</table>
				<div style="text-align:right;padding-right:26px;">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveMenuForm">保存</button>
					<button class="layui-btn layui-btn-primary" id="btn-menu-cancel">取消</button>
				</div>
			</form>
    	</div>
    	
  	</body>
</html>
<script type="text/javascript">
var jsonParam = {/*pageSize:1*/};

layui.use(['element', 'form', 'laypage', 'layer'], function(){
	var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
	var form = layui.form();
	var laypage = layui.laypage;
	var layer = layui.layer;
	
	sysRoleList();
	
	form.on('checkbox(chkRoleIdAll)', function(data){
		if(data.elem.checked){
			$('#tableList [name=roleId]').prop('checked', true);
		}else{
			$('#tableList [name=roleId]').prop('checked', false);
		}
		form.render();
	});
	
	form.on('submit(searchForm)', function(data){
		jsonParam = data.field;
		jsonParam.pageNo = 1;
		sysRoleList();
		return false;
	});
	
	form.on('submit(saveForm)', function(data){
		var field = data.field;
		field.operating = 'save';
		var retJson = ajaxFun('/sys/sysRole', field);
    	if(retJson.code==1){
    		sysUsersList();
    		
    		$('#btn-edit-cancel').click();
    		layer.msg('保存成功');
    	}else{
    		if(retJson.msg!=null){
    			layer.msg(retJson.msg);
    		}
    	}
    	return false;
	});
	
	form.on('checkbox(chkMenuId)', function(data){
		var menuCode = $(data.elem).attr('menuCode');
		if(data.elem.checked){
			$('input[name=menuId][superMenuCode='+menuCode+']').prop('checked', true);
		}else{
			$('input[name=menuId][superMenuCode='+menuCode+']').prop('checked', false);
		}
		form.render('checkbox');
	});
	
	form.on('submit(saveMenuForm)', function(data){
		var menuId = '';
		$('#formMenu [name=menuId]:checked').each(function(index, e){
			if(index==0){
				menuId = $(this).val();
			}else{
				menuId += "," + $(this).val();
			}
		});
		var field = data.field;
		field.menuIds = menuId;
		
		field.operating = 'saveRoleMenu';
		var retJson = ajaxFun('/sys/sysRole', field);
    	if(retJson.code==1){
    		$('#btn-menu-cancel').click();
    		layer.msg('保存成功');
    	}else{
    		if(retJson.msg!=null){
    			layer.msg(retJson.msg);
    		}
    	}
    	return false;
	});
	
	function bindOperatingClick(){
		$('.openEdit').on('click', function(){
			var roleId = $(this).attr('roleId');
			var retJson = {data : {}};
			if(roleId!=null && roleId!=''){
				retJson = ajaxFun('/sys/sysRole', {operating : 'get', roleId : roleId});
				if(retJson.code != 1){
					layer.msg(retJson.msg);
					return false;
				}
			}
			
			var data = retJson.data;
			$('#formEdit [name=roleId]').val(objectToVal(data.roleId));
			$('#formEdit [name=roleName]').val(objectToVal(data.roleName));
			$('#formEdit [name=status]').val(objectToVal(data.status));
			form.render('select');
			
			var index = 
				layer.open({
					type: 1,
					title : (roleId==null||roleId==0 ? '新增' : '修改') + '系统角色信息',
					content : $('#div-edit'),
					area : '360px'
				});
			
			$('#btn-edit-cancel').click(function(){
				layer.close(index);
				return false;
			});
			return false;
		});
		
		$('.delete').on('click', function(){
			var roleId = $(this).attr('roleId');
			var roleName = $(this).attr('roleName');
			var index = layer.confirm('确认删除系统角色：'+roleName, {
						  	btn: ['确定','取消']
						}, function(){
							retJson = ajaxFun('/sys/sysRole', {operating : 'delete', roleId : roleId});
							if(retJson.code==1){
								sysRoleList();
								layer.close(index);
								layer.msg('删除成功');
							}else{
								layer.msg(retJson.msg);
							}
						}, function(){
						  	//点击取消按钮执行的方法
						});
		});
		
		$('.openMenu').on('click', function(){
			var roleId = $(this).attr('roleId');
			$('#formMenu [name=roleId]').val(roleId);
			$('#tableMenuList tbody').html('');
			
			var retJson = ajaxFun('/sys/sysRole', {operating : 'queryRoleJoinMenu', roleId : roleId});
			if(retJson.code != 1){
				layer.msg(retJson.msg);
				return false;
			}
			
			var menuArray = retJson.menuArray, roleJoinMenuJson = retJson.roleJoinMenuJson;
			var html = '';
			for(var i=0,len=menuArray.length; i<len; i++){
				html += '<tr>';
				html += 	'<td><input type="checkbox" name="menuId" lay-skin="primary" lay-filter="chkMenuId" value="'+menuArray[i].menuId+'" menuCode="'+menuArray[i].menuCode+'" title="'+menuArray[i].menuName+'" '+(roleJoinMenuJson['I_'+menuArray[i].menuId]!=null?'checked':'')+'/></td>';
				html += '</tr>';
				for(var j=0,size=menuArray[i].list.length; j<size; j++){
					html += '<tr>';
					html += 	'<td style="padding-left:46px;"><input type="checkbox" name="menuId" lay-skin="primary" lay-filter="chkMenuId" value="'+menuArray[i].list[j].menuId+'" menuCode="'+menuArray[i].list[j].menuCode+'" superMenuCode="'+menuArray[i].menuCode+'" title="'+menuArray[i].list[j].menuName+'" '+(roleJoinMenuJson['I_'+menuArray[i].list[j].menuId]!=null?'checked':'')+'/></td>';
					html += '</tr>';
				}
			}
			$('#tableMenuList tbody').append(html);
			form.render();
			
			var index = 
				layer.open({
					type: 1,
					title : '角色权限菜单',
					content : $('#div-menu'),
					area : '380px'
				});
			
			$('#btn-menu-cancel').click(function(){
				layer.close(index);
				return false;
			});
		});
	}
	
	function sysRoleList(){
		$('#tableList tbody').html('');
		
		var retJson = ajaxFun('/sys/sysRole', jsonParam);
		var list = strToJson(retJson.data);
		var html = '';
		for(var i=0,len=list.length; i<len; i++){
			html += '<tr>';
			html += 	'<td><input type="checkbox" name="roleId" lay-skin="primary" lay-filter="chkRoleId" value="'+list[i].roleId+'"/></td>';
			html += 	'<td>'+list[i].roleName+'</td>';
			html += 	'<td>'+(list[i].status==1?'<span class="status1">正常</span>':'<span class="status0">禁用</span>')+'</td>';
			html += 	'<td>'+list[i].createTime+'</td>';
			html += 	'<td class="operating">';
			html += 		'<a href="javascript:" class="openEdit first" roleId="'+list[i].roleId+'">编辑</a>';
			html += 		'<a href="javascript:" class="delete" roleId="'+list[i].roleId+'" roleName="'+list[i].roleName+'">删除</a>';
			html += 		'<a href="javascript:" class="openMenu" roleId="'+list[i].roleId+'">菜单</a>';
			html += 	'</td>';
			html += '</tr>';
		}
		$('#tableList tbody').append(html);
		form.render();
		bindOperatingClick();
		
		laypage({
		    cont : 'div-page',
		    pages : retJson.totalPage,
		    curr : retJson.pageNo,
		    skip: true,
		    jump : function(obj, first){
		    	if(!first){
		    		jsonParam.pageNo = obj.curr;
		    		sysRoleList();
		    	}
		    }
		});
	}
	
	function objectToVal(o){
		if(o==null || o=='undefined'){
			return '';
		}
		return o;
	}
	
});

</script>